<template>
  <div class="neu-input-table">
    <el-form-item :rules="item.rule" :label="item.label" :prop="item.prop">
      <el-popover
        placement="bottom-start"
        :width="item.width ? item.width : '600'"
        trigger="click"
        @show="show"
        @hide="hide"
        ref="modal"
      >
        <div class="my-table" @click="myTableClick">
          <neu-search
            ref="mySearch"
            v-if="item.searcher && item.searcher.config"
            :config="item.searcher.config"
            :formData="item.searcher.formData"
            :buttons="item.searcher.buttons"
            :searchLayoutParam="item.searcher.searchLayoutParam"
          />
          <!--:hideButton="true"-->
          <neu-table
            ref="table"
            :data="item.tableData"
            :options="item.options"
            height="200"
            @scrollCallback="scrollCallback"
          ></neu-table>
          <div class="btns" style="text-align: right">
            <el-button size="medium" @click="cancel">取消</el-button>
            <el-button size="medium" type="primary" @click="savePlan"
              >确定</el-button
            >
          </div>
        </div>
        <el-button slot="reference" class="select"
          >{{ tempTxt }}
          <span class="tip" :class="this.isShow ? '' : 'down'"
            ><i class="iconfont icondown"></i
          ></span>
        </el-button>
      </el-popover>
    </el-form-item>
  </div>
</template>

<script>
import _ from "lodash";
// import Scrollbar from "../../utils/Scrollbar";

export default {
  name: "inputTableCom",
  props: {
    searcher: {
      type: Object,
      default: () => {
        return {};
      }
    },
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      isShow: false,
      tempTxt: ""
    };
  },
  methods: {
    scrollCallback(params = {}) {
      this.item.scrollCallback &&
        this.item.scrollCallback(params.multipleSelection);
    },
    show() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    cancel() {
      this.isShow = false;
      this.$refs.modal.doClose();
    },
    savePlan() {
      let selection = this.$refs.table.multipleSelection;
      if (selection.length && selection.length > 0) {
        this.tempTxt = "已选" + selection.length + "项";
        this.formData[this.item.prop] = _.trimStart(
          this.$refs.table.multipleSelection.map(res => res[this.item.key])
        );
      } else {
        // this.$message({message: '请选择要保存的项', type: 'warning'});
      }
      this.isShow = false;
      this.$refs.modal.doClose();
    },
    myTableClick(e) {
      e && e.preventDefault && e.preventDefault();
      e && e.stopPropagation && e.stopPropagation();
    }
  }
};
</script>

<style scoped lang="scss">
.neu-input-table {
  height: 40px;
  margin-bottom: 15px;
  .btns {
    padding: 16px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    background-color: white;
    text-align: right !important;
  }

  .my-table {
    position: absolute;
    padding: 10px;
    max-height: 600px;
    width: 100%;
    color: #606266;
    background: #fff;
    border-radius: 4px;
  }
  .select {
    margin-top: 4px;
    padding-right: 8px;
    width: 100%;
    height: 32px;
    text-align: left;
    .tip {
      float: right;
    }

    /*.tip.up{
        transform: rotateZ(-180deg);
        -webkit-transform: rotateZ(-180deg);
        transition: all .3s ease-out
      }*/
    .tip.down {
      transform: rotateZ(-180deg);
      -webkit-transform: rotateZ(-180deg);
      transition: all 0.3s ease-out;
    }
  }

  ::v-deep .neu-table-win {
    margin: 0;
  }
  ::v-deep .itemStyle .el-form-item__label {
    width: auto !important;
  }
  ::v-deep .iconfont {
    color: #c0c4cc;
  }
}
</style>
